'use client'

import React from 'react';
import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import DroppedComponent from './DroppedComponent';
import { ComponentConfig } from './DroppedComponent';

interface CanvasAreaProps {
  components: ComponentConfig[];
  onDeleteComponent: (id: string) => void;
  onEditComponent: (id: string, properties: any) => void;
  selectedComponentId: string | null;
  onSelectComponent: (id: string) => void;
}

export default function CanvasArea({ 
  components, 
  onDeleteComponent, 
  onEditComponent, 
  selectedComponentId, 
  onSelectComponent 
}: CanvasAreaProps) {
  const { isOver, setNodeRef } = useDroppable({
    id: 'canvas-area',
  });

  return (
    <div className="flex-1 p-6 flex justify-center">
      <div className="w-[500px] overflow-y-auto overflow-x-hidden">
        <div
          ref={setNodeRef}
          className={`
           border-2 border-dashed rounded-lg p-4 overflow-auto h-[calc(100vh-200px)]
          ${isOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-white'}
          ${components.length === 0 ? 'flex items-center justify-center' : ''}
        `}
        >
          {components.length === 0 ? (
            <div className="text-center text-gray-500">
              <div className="text-4xl mb-4">📱</div>
              <p className="text-lg font-medium">将组件放于此</p>
              <p className="text-sm">从左侧面板拖拽组件开始构建您的页面</p>
            </div>
          ) : (
            <SortableContext items={components} strategy={verticalListSortingStrategy}>
              {components.map((component) => (
                <DroppedComponent
                  key={component.id}
                  component={component}
                  onDelete={onDeleteComponent}
                  onEdit={onEditComponent}
                  isSelected={selectedComponentId === component.id}
                  onSelect={onSelectComponent}
                />
              ))}
            </SortableContext>
          )}
        </div>
      </div>
    </div>
  );
}